<template>
  <div class="ur-card" >
    <card-header :title="'工单派发'" :hasBackground="true"></card-header>
    <div class="ur-card-body pl-0" :class="{active:statisticIndex==7}">
      <div class="position-relative w-100">
<!--        <title-mark class="ml-3" :title="'工单派发'"></title-mark>-->
        <div class="mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="query('year',2)" size="mini" :class="{active:workType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="query('month',1)" size="mini" :class="{active:workType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="query('day',0)" size="mini" :class="{active:workType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart5" class="w-100 mt-3" :style="{'height':height+'px'}" ref="echarts4" element-loading-customClass="myChart5"
             v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="transparent"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import api from 'api/api'
  import chart from 'api/chart'
  import cardHeader from "base/card-header"
  import titleMark from "base/titleMark"
  import fetch from 'api/fetch'
  import workData from './workData'

  export default {
    components: {cardHeader,titleMark},
    props: {
      height:0,
      statisticIndex:{
        type:Number,
        default:7
      },
      isRefresh:false
    },
    data() {
      return {
        loading:false,
        workChart: null,
        workType:'day',
        typeIndex:0
      }
    },
    watch: {
      statisticIndex:{
        handler(newValue, oldValue) {
          this.statisticIndex = newValue
        },
        deep: true
      },
      workType(type){
        this.queryWork(type)
      },
      isRefresh:{
        handler(newValue, oldValue) {
          this.isRefresh = newValue
          if(newValue){
            this.setTimer()
          }else{
            this.$store.commit('timer/clearWorkTimer')
          }
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        workTimer: state => state.timer.workTimer,
      })
    },
    methods: {
      query(type,index){
        this.typeIndex=index
        this.workType = type
        this.$store.commit('timer/clearWorkTimer')
      },
      setTimer(){
        let _this=this
        let types=['day','month','year']
        this.$store.commit('timer/setWorkTimer', setInterval(() => {
          _this.typeIndex++
          if (_this.typeIndex == 3) _this.typeIndex = 0
          _this.workType = types[_this.typeIndex]
        }, 60000))
      },
      async queryWork(type){//亮灯率
        let dataDefault = {

        }
        this.workType = type
        this.loading=true
        if (this.workChart) {
          this.workChart.dispose()
        }
        this.workChart = chart.barChart('myChart5')
        let res = await api.fetchSimple('/OverView/TotalWorkerOrder', {type: type})
        let data = res
        if (data) {
          this.loading=false
          let xData = [], yCompleted = [],yCreated=[]

          for (let i = 0; i < data.length; i++) {
            xData.push(fetch.getDate(type, data[i].Date))
            let o={}
            //三和工单造假数据
            if(api.ajaxServe=='http://39.100.245.87:8888/'){//三和
              if(type=="month"){
                o = workData.monthData[i]
              }else if(type=='day'){
                o = workData.dayData[i]
              }else {//年
                o = workData.yearData[i]
              }
              yCompleted.push(o.Completed)
              yCreated.push(o.Created)
            }else{
              yCompleted.push(data[i].Completed)
              yCreated.push(data[i].Created)
            }
          }
          if(type=='day'){
            this.$emit('getYWork',data[data.length-2].Completed)//首页转圈显示昨日完成工单
          }
          let formatter = '时间：{b0}<br/>完成数：{c0}<br/>派单数：{c1}'
          let shadowColor = {completed:['rgba(27,175,133,0.5)', 'rgba(27,175,133,0)'],created:['rgba(230,31,81,0.5)', 'rgba(230,31,81,0.2)']}
          let lineColor={completed:'#1BAF85',created:'#DA2758'}
          chart.setLineOptionChart(this.workChart, formatter, xData, {completed:yCompleted,created:yCreated},
              {completed:'完成数',created:'派单数'},lineColor, shadowColor)
          if (!this.workTimer) {
            this.setTimer()
          }
        }
      },
    },
    created() {
      this.setTimer()
    },
    mounted() {
      this.queryWork('day')
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
